<template>
	<view class="container">
		<view class="mine-container">
			<view class="mine-detail">
				<view class="detail-box">
					<template v-if="isLogin()">
						<view class="mine-img">
							<image src="@/static/images/logo.png"></image>
						</view>
						<view>
							<view class="mine-name-top">
								<text>{{ nickname }}</text>
							</view>
							<view class="mine-name-bottom">
								<text>Tel：{{ name }}</text>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="cu-avatar xl round bg-white">
							<view class="iconfont icon-people text-gray icon"></view>
						</view>
					</template>
				</view>

				<view v-if="isLogin()" class="mine-enter" @click="go('mine/cashOut')">
					<text>点击提现</text>
					<image src="@/static/images/enter_icon.png"></image>
				</view>
			</view>
		</view>

		<view class="mine-message">
			<view class="second-banner">
				<view class="second-item">
					<view class="item-num">
						<text>{{ zeroTwo(info.totalIncome)}}</text>
					</view>
					<view class="item-name">
						<text>总收益</text>
					</view>
				</view>
				<view class="second-item">
					<view class="item-num is-border">
						<text>{{zeroTwo(info.cashOut)}}</text>
					</view>
					<view class="item-name">
						<text>已提现</text>
					</view>
				</view>
				<view class="second-item">
					<view class="item-num">
						<text>{{ zeroTwo(info.totalRefund)}}</text>
					</view>
					<view class="item-name">
						<text>总退款</text>
					</view>
				</view>
			</view>
			<view class="tool-banner">
				<view class="tool-item" @click="go('mine/wallet')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/purse.png"></image>
						</view>
						<view class="left-item">
							<text>我的钱包</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>结算与转账</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>

				<view class="tool-item" @click="go('mine/record')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/report.png"></image>
						</view>
						<view class="left-item">
							<text>报告记录</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>进件与报告</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>

		<!-- 		<view class="tool-item" v-if='!$auth.hasRole("group")' @click="go('mine/upgrade')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/Lower.png"></image>

						</view>
						<view class="left-item">
							<text>我要升级</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>升级身份享更多收益</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view> -->

				<view class="tool-item" @click="$modal.showToast('模块建设中~')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/data.png"></image>
						</view>
						<view class="left-item">
							<text>数据统计</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>查询与收益</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>

				<!-- <view class="tool-item">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/up.png" ></image>
						</view>
						<view class="left-item">
							<text>我要升级</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>升级身份</text>
							<image src="@/static/images/enter_icon.png" ></image>
						</view>
					</view>
				</view> -->

		<!-- 		<view class="tool-item" v-if="isInviteRegion" @click="go('home/invite?index=captain')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/up.png"></image>
						</view>
						<view class="left-item">
							<text>邀请队长</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>收益更多</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view> -->

				<view class="tool-item" v-if="isInviteCaptain" @click="go('home/invite?index=member')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/purse.png"></image>
						</view>
						<view class="left-item">
							<text>邀请队员</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>收益更多</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>

				<!-- <view class="tool-item" @click="goSource()">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/data.png"></image>
						</view>
						<view class="left-item">
							<text>资源共享</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text></text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view> -->
			</view>

			<view class="tool-banner">
				<view class="tool-item" @click="to('mine/setting')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/setting.png"></image>
						</view>
						<view class="left-item">
							<text>系统设置</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text></text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>
				
				<view class="tool-item"  @click="to('mine/agreement')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/report.png"></image>
						</view>
						<view class="left-item">
							<text>服务协议</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text></text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>

				<view class="tool-item" @click="to('mine/about')">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/center.png"></image>
						</view>
						<view class="left-item">
							<text>关于我们</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<text>客服</text>
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>

				

				<view class="tool-item" v-if="isLogin()" @click="handleLogout">
					<view class="tool-left">
						<view class="tool-image">
							<image src="@/static/images/outLogin.png"></image>
						</view>
						<view class="left-item">
							<text>退出登录</text>
						</view>
					</view>
					<view class="tool-left">
						<view class="tool-enter">
							<image src="@/static/images/enter_icon.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		statistics
	} from '@/api/my'

	export default {
		data() {
			return {
				info: {
					totalIncome: null,
					cashOut: null,
					totalRefund: null
				}
			}
		},
		computed: {
			name() {
				return this.$store.state.user.name
			},
			nickname() {
				return this.$store.state.user.nickname
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			},
			isInviteCaptain() {
				return this.isLogin() && this.$auth.hasRoleOr(["region", "captain"])
			},
			isInviteRegion() {
				return this.isLogin() && this.$auth.hasRoleOr(["region"])
			}
		},
		mounted() {
			if (this.isLogin()) {
				statistics().then(res => {
					this.info = res
				})
			} else {
				this.$tab.reLaunch('/pages/login')
			}
		},
		methods: {
			goSource(){
				if(this.isInviteCaptain){
					this.go('mine/source')
				}else{
					this.$modal.showToast('仅队长以上可见，快去升级吧！')
				}
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
	}

	.container {
		width: 100%;
		height: 100%;
		overflow: auto;

		.mine-container {
			width: 100%;
			height: auto;
			padding: 0 2vw;
			padding-top: 8vw;
			background-image: url(../../static/images/background.png);
			background-size: 100% 100%;
			padding-bottom: 4vw;

			.mine-detail {
				width: 100%;
				height: 18vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.detail-box {
					display: flex;
					align-items: center;
					gap: 2vw;

					.mine-img {
						width: 15vw;
						height: 15vw;
						border-radius: 50%;
						overflow: hidden;
						border: 1px solid #64CAFF;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.mine-name-top {
						font-size: 4vw;
						font-weight: bold;
					}

					.mine-name-bottom {
						font-size: 3vw;
						color: #fff;
						padding: .5vw 2vw;
						border-radius: 2vw;
						background: linear-gradient(to right, #55A8E9, #2667E8);
						margin-top: 1vw;
					}
				}
			}
		}

		.mine-enter {
			display: flex;
			align-items: center;
			gap: 2vw;
			font-size: 4vw;
			color: #333333;

			image {
				width: 1.3vw;
				height: 2.4vw;
				margin-top: .5vw;
			}
		}
	}

	.mine-message {
		width: 100%;
		height: 50vw;
		background-image: url(../../static/images/inner.png);
		background-size: 100% 100%;

		padding: 0 3vw;
		margin-bottom: 6vw;
	}

	.second-banner {
		width: 98%;
		height: 24vw;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin: ;
	}

	.second-item {
		width: 30%;
		height: auto;
		text-align: center;
		font-size: 3.2vw;

		.item-num {
			font-size: 6vw;
			font-weight: bold;
		}

		.item-name {
			margin-top: 1vw;
		}

		.is-border {
			position: relative;
		}

		.is-border ::after {
			content: "";
			width: 1px;
			height: 9vw;
			background-color: #fff;
			position: absolute;
			top: 1vw;
			left: 0;
		}

		.is-border ::before {
			content: "";
			width: 1px;
			height: 9vw;
			background-color: #fff;
			position: absolute;
			top: 1vw;
			right: 0;
		}
	}



	.tool-banner {
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-top: 3vw;
		border-radius: 3vw;
		padding: 0 4vw;

		.tool-item {
			padding: 3vw 0;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tool-left {
				display: flex;
				align-items: center;
				gap: 1vw;

				.tool-image {
					width: 4.5vw;
					height: 4.5vw;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.left-item {
					font-size: 3.6vw;
					font-weight: 500;
				}

				.tool-enter {
					display: flex;
					align-items: center;
					gap: 2vw;
					font-size: 3.2vw;
					color: #666666;

					image {
						width: 1.3vw;
						height: 2.4vw;
						margin-top: .5vw;

					}
				}
			}
		}
	}
</style>